<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/pk12.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
    <h2>这里是标题</h2>
    <p style="text-align: center">这里是描述信息</p>
    <br>
    <div class="btn">
        <button id="btn1" type="button" onclick="btn(value);buun()">这是题目1</button>
        <button id="btn2" type="button" onclick="btn(value)">这是题目2</button>
        <button id="btn3" type="button" onclick="btn(value)">这是题目3</button>
        <button id="btn4" type="button" onclick="btn(value)">这是题目4</button>
        <button id="btn5" type="button" onclick="btn(value)">这是题目5</button>
    </div>

</div>
<div class="input">
    <br>
    A的分数：<input id="scoreA" class="score">
    B的分数：<input id="scoreB" class="score">
    <img src="imgs/图层%201.png" height="70px" style="">
    自己：<input id="A" class="score">
    对手：<input id="B" class="score"></div>
<br><br><br>
<div class="con"><!--表格部分-->
    <p>题目描述</p><br>
    <p id="QesDes" class="pi"></p>
    <br>
    <p>测试样例</p><br>
    <p class="pi"></p><br>
    <p>输出样例</p><br>
    <p class="pi"></p><br>
    <form style="height: 400px;">
        <div id="mian">
            <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
            <textarea id="test" name="content" onkeyup="keyUp()"
                      onscroll="getId('leftNum').scrollTop = this.scrollTop;">
    </textarea>
        </div>
        <br>
        <button type="button" onclick="sub()"
                style="background-color:deepskyblue;color: white; height: 30px; width: 70px; border-radius: 6px; border-style: none; cursor: pointer; ">
            提交
        </button>

    </form>
    <br> <br>
</div>

<script src="js/axios-0.18.0.js"></script>
<script type="text/javascript">


    document.getElementById("test").value = ""; //初始化下代码框
    var curQes = ""; //当前选择题目的id
    //var curId = ""; //当前选择题目在页面中的题号
    var problemId = [0, 0, 0, 0, 0]; //存放当前五道题目的id
    var id = ""; //自己的id
    var rivalId = getId(); //对手的id

    axios({
        method: "post",
        url: "http://localhost:8080/YsuCode-demo/getUserSessionServlet",
        data: ""
    }).then(function (resp) {
        var user = resp.data;
        //获得用户数据
        id = user.id;
        //name = user.username;
        document.getElementById("A").value = id; //暂时显示一下先
        document.getElementById("B").value = rivalId; //暂时显示一下先
        setWs(id, rivalId); //建立websocket连接
    })


    function btn(QesId) {
        axios({ //加载题目
            method: "post",
            url: "http://localhost:8080/YsuCode-demo/selectOneOfOjServlet",
            data: "id=" + QesId
        }).then(function (resp) {
            var problem = resp.data;
            //回显题目内容
            //document.getElementById("QesName").innerText = problem.title;
            document.getElementById("QesDes").innerText = problem.description;
            document.getElementById("test").value = problem.templateCode;
            curQes = problem.id;
        })
    }

    function getId() { //获取对手id
        var result;
        var url = window.location.search; //获取url中"?"符后的字串
        if (url.indexOf("?") != -1) {
            result = url.substr(url.indexOf("=") + 1);
        }
        return result;
    }

    function sub() {
        //转一下码 要不然+、=、&等特殊符号发不过去
        if (curQes != "") {
            var code = encodeURIComponent(document.getElementById("test").value);
            axios({
                method: "post",
                url: "http://localhost:8080/YsuCode-demo/testJavaServlet",
                data: "id=" + curQes + "&code=" + code
            }).then(function (resp) {
                var res = resp.data;
                if (res == 666) { //题目正确
                    alert(curQes + ":答案正确");
                    //发送加分申请
                    sendMessage("douSub" + curQes.toString());
                } else if (res == 233) {
                    alert("答案错误");
                } else if (res == 1) {
                    alert("编译错误");
                } else if (res == 2) {
                    alert("运行错误");
                } else {
                    alert("未知错误");
                }
            })
        } else {
            alert("请选择题目后再提交");
        }
    }


    function setWs(id, rivalId) {
        //建立websocket连接
        webSocket = new WebSocket('ws://localhost:8080/YsuCode-demo/doublePkWebSocket/' + id + '&' + rivalId);
        webSocket.onerror = function (event) {
            onError(event)
        };
        webSocket.onopen = function (event) {
            onOpen(event)
        };
        webSocket.onmessage = function (event) {
            onMessage(event)
        };

        function onMessage(event) {
            //回调服务器返回的数据   event.data
            var resp = event.data;
            //document.getElementById('return').value += event.data + "\n";
            if (resp.indexOf("id") != -1) {
                //接受后台生成的题目id数组
                problemId = resp.slice(3).split(",");
                for (let i = 0; i < problemId.length; i++) {
                    console.log("第" + i + "个:" + problemId[i]);
                }
                //初始化五道题目
                document.getElementById("btn1").value = problemId[0];
                document.getElementById("btn2").value = problemId[1];
                document.getElementById("btn3").value = problemId[2];
                document.getElementById("btn4").value = problemId[3];
                document.getElementById("btn5").value = problemId[4];
            }
        }

        function onOpen(event) {
            //成功建立连接
        }

        function onError(event) {
            alert(event.data);
        }
    }

    function sendMessage(mes) {
        if (mes == "double") {
            //给后端发送双人匹配申请
            webSocket.send(mes);
            return false;
        } else if (mes.indexOf("douSub") != -1) {
            //给后端发送提交题目正确后的加分申请
            webSocket.send(mes);
            return false;
        }

    }
</script>
<script type="text/javascript"> //代码框左侧显示行数的代码
var num = "";
var test = getId('test');

function getId(obj) {
    return document.getElementById(obj);
}

function keyUp() {/*按键被释放时触发*/
    var str = test.value;
    str = str.replace(/\r/gi, "");
    str = str.split("\n");
    var n = str.length;
    line(n);
}

function line(n) {
    var lineobj = getId("leftNum");
    for (var i = 1; i <= n; i++) {
        if (document.all) {
            num += i + "\r\n";//判断浏览器是否是IE
        } else {
            num += i + "\n";
        }
    }
    lineobj.value = num;
    num = "";
}

(function () {
    keyUp();
})();
</script>

</body>
</html>